import { Form, Table, Space, message, Modal, Input } from "antd";
import "./index.scss";
import { useState, useEffect } from "react";
import type { ColumnsType } from "antd/es/table";
import { useNavigate } from "react-router-dom";
import "react-quill/dist/quill.snow.css";
import http from "../../../../utils/http";

const Report = () => {
  //返回
  const navigate = useNavigate();
  const fh = (link: string) => {
    navigate("/home" + link);
  };

  //表内容
  const [data, setData] = useState([]);
  const columns: ColumnsType<DataType> = [
    {
      title: "举报电话",
      dataIndex: "content",
      key: "content",
    },

    {
      title: "操作",
      key: "action",
      render: (_: any, record: any) => (
        <Space size="middle">
          <a
            onClick={() => {
              showEdit(record);
            }}
            className="edit"
          >
            编辑
          </a>
        </Space>
      ),
      width: "120px",
    },
  ];

  // 表格信息
  interface DataType {
    key: string;
    content: String;
  }

  // 渲染数据
  const getData = () => {
    http({
      url: "/getContact",
    }).then((res) => {
      console.log("所有数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData(_data);
    });
  };
  useEffect(() => {
    getData();
  }, []);

  // 编辑
  const [editForm] = Form.useForm();
  const [isModalOpen, setIsEditOpen] = useState(false);

  const showEdit = (record: any) => {
    console.log("editrecord", record);
    editForm.setFieldsValue({ ...record });
    setIsEditOpen(true);
  };
  // 确定编辑
  const handleOk = () => {
    const data = editForm.getFieldsValue(true);
    http({
      url: "/editContact",
      method: "post",
      data: data,
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("修改成功");
        setIsEditOpen(false);
        getData();
      } else {
        message.error("修改失败");
      }
    });
    setIsEditOpen(false);
  };
  const handleCancel = () => {
    setIsEditOpen(false);
  };

  return (
    <div className="Report">
      <div className="top">
        <div className="top-l">
          <p
            className="title"
            onClick={() => {
              fh("/setUp");
            }}
          >
            设置
          </p>
          <div>&gt;</div>
          <p className="detail">举报电话</p>
        </div>
      </div>

      <div className="hr"></div>

      <Table
        columns={columns}
        dataSource={data}
        bordered={true}
        pagination={false}
        style={{
          paddingTop: "20px",
        }}
      />

      {/* 编辑框 */}
      <Modal
        title="编辑"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={"确认"}
        cancelText={"取消"}
      >
        <Form
          form={editForm}
          name="basic"
          initialValues={{ remember: true }}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 16 }}
          autoComplete="off"
        >
          <Form.Item
            label="举报电话"
            name="content"
            rules={[
              {
                required: true,
                message: "请输入要修改的内容!",
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default Report;
